/**
 * 小地图
 */

import * as THREE from '../threejs/build/three.module.js';
import { PointerLockControls } from '../threejs/js/controls/PointerLockControls.js';

class SmallView {

    constructor(viewPoints, smallCameraPosition, camera, points) {
        this.viewPoints = viewPoints;
        this.smallCameraPosition = smallCameraPosition;
        this.camera = camera;
        this.points = points;
        this.isRenderSmall = false;

        this.pointLockControls = new PointerLockControls(camera, document.body);
        this.euler = new THREE.Euler(0, 0, 0, 'YXZ');

        this.init();
    }

    init() {

        var canvas = document.createElement('canvas');
        canvas.id = 'small';
        $('#threeContainer').append(canvas);

        var button = document.createElement('button');
        button.id = 'smallControl';
        button.innerHTML = '显示小地图';
        $('#threeContainer').append(button);

        let renderer_s;
        $('#smallControl').click(() => {
            $('#small').animate({ width: 'toggle' }, 350);
            setTimeout(() => {
                if (this.innerHTML === '隐藏小地图') {
                    this.innerHTML = '显示小地图';
                    this.isRenderSmall = false;
                    this.renderer_s.clear();
                } else {
                    this.innerHTML = '隐藏小地图';
                    this.isRenderSmall = true;
                }
            }, 300);
        });

        this.renderer_s = new THREE.WebGLRenderer({
            antialias: true,
            canvas: canvas
        });
        renderer_s = this.renderer_s;
        this.renderer_s.setPixelRatio(window.devicePixelRatio);
        this.renderer_s.setSize($("#small").width(), $("#small").height());
        this.renderer_s.shadowMap.enabled = true;
        this.renderer_s.toneMappingExposure = 1.05;
        this.renderer_s.outputEncoding = THREE.sRGBEncoding;

        this.camera_s = new THREE.PerspectiveCamera(45, $("#small").width() / $("#small").height(), 1, 20000);
        this.camera_s.position.set(...this.smallCameraPosition);
        this.camera_s.rotation.set(-Math.PI / 2, 0, 0);

        this.scene_s = new THREE.Scene();
        this.scene_s.background = new THREE.Color(0x001b3b);

        let light = new THREE.DirectionalLight(0xffffff, 2);
        let light1 = new THREE.AmbientLight(0xffffff);
        this.scene_s.add(light);
        this.scene_s.add(light1);

        let scale = this.smallCameraPosition[1] / 4000;

        this.box = new THREE.Mesh(new THREE.SphereGeometry(80 * scale, 32 * scale, 32 * scale), new THREE.MeshLambertMaterial({
            color: 0xff0000
        }));
        this.scene_s.add(this.box);

        this.cylinder = new THREE.Mesh(new THREE.CylinderGeometry(300 * scale, 0, 300 * scale, 32), new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true }));
        this.cylinder.rotateX(-Math.PI / 2);
        this.scene_s.add(this.cylinder);

        for (var i = 0, point; i < this.viewPoints.position.length; i++) {
            point = new THREE.Mesh(new THREE.CircleGeometry(100 * scale, 32), new THREE.MeshBasicMaterial({ color: 0xffff00 }));
            point.position.set(this.viewPoints.position[i][0], 500, this.viewPoints.position[i][2]);
            point.flyPosition = this.viewPoints.position[i].concat([]);
            point.flyTarget = this.viewPoints.target[i].concat([]);
            point.rotateX(-Math.PI / 2);
            this.scene_s.add(point);
            this.points.push(point);
        }
    }

    refresh() {
        this.euler.setFromQuaternion(this.camera.quaternion);

        let position = this.pointLockControls.getObject().position.clone();
        let rotate = this.euler.y;
        let length = 300 * this.smallCameraPosition[1] / 8000;

        this.box && this.box.position.set(position.x, 500, position.z);
        this.cylinder && this.cylinder.position.set(position.x - length * Math.sin(rotate), 500, position.z - length * Math.cos(rotate));
        this.cylinder && (this.cylinder.rotation.z = rotate);

        this.renderer_s && this.isRenderSmall && this.renderer_s.render(this.scene_s, this.camera_s);
    }
}

export { SmallView }
